<template>
  <a-card :bordered="false">
    <a-drawer
      width="70%"
      :title="'编辑文件['+record.fileName+']'"
      :placement="placement"
      :closable="true"
      :visible="visible"
      @close="onClose">
      <a-spin tip="加载中请稍后..." :spinning="spinning" size="large">
        <a-row :gutter="24">
          <a-col :md="24">
            <div class="table-operator">
            </div>
            <div class="code">
              <codemirror ref="codemirror" @ctrls="ctrls"></codemirror>
            </div>
          </a-col>
        </a-row>
      </a-spin>
    </a-drawer>
  </a-card>
</template>

<script>
  import Codemirror from '@/components/Codemirror/Codemirror.vue'
  import { getFileContent, setFileContent } from '@/api/site/siteSource'
  export default {
    components: {
      Codemirror
    },
    data () {
      return {
        visible: false,
        spinning: true,
        placement: 'right',
        record: {
          name: null
        }
      }
    },
    watch: {
    },
    methods: {
      openDesign (record) {
        this.record = record
        this.showDrawer()
        this.getFileContent(record.relativePath)
        this.openNotification('bottomRight', '光标定位编辑框后： CTRL+S 保存')
      },
      ctrls () {
        this.resetContent()
      },
      getFileContent (path) {
         if (path) {
           getFileContent({ path: path }).then(response => {
             if (response.code === 0) {
                this.spinning = false
                this.setcodemirror(response.res)
             }
           })
         }
      },
      resetContent () {
        if (this.record) {
          const content = this.getcodemirror()
          const path = this.record.relativePath
          this.setFileContent(content, path)
        }
      },
      openNotification (placement, desc) {
            this.$notification.open({
              message: '温馨提示',
              description: desc,
              placement
            })
      },
      setFileContent (content, path) {
         setFileContent({ content: content, path: path }).then(response => {
            if (response.code === 0) {
               this.$message.info('~保存成功~')
            } else {
               this.$message.error(response.msg)
            }
         })
      },
      setcodemirror (content) {
         this.$refs.codemirror.setCodeContent(content)
      },
      clearcodemirror () {
         this.$refs.codemirror.clear()
      },
      getcodemirror () {
         return this.$refs.codemirror.getCodeContent()
      },
      showDrawer () {
        this.visible = true
      },
      onClose () {
        this.visible = false
        this.clearcodemirror()
      },
      clickBlank () {
        this.dropdownVisible = false
      }
    }
  }
</script>
<style type="text/css">
  .code {
    border: 0.5px solid #e8e8e8;
    height: 800px;
    /* background-color: #2B2B2B;*/
  }

  .CodeMirror {
    min-height: 798px !important;
    overflow-y: scroll !important;
    /* background-color: rgb(230, 225, 218) */
  }
</style>
